import { useState, useRef, useEffect, useCallback } from 'react'
import * as THREE from 'three'

// 图片介绍内容配置
const PHOTO_DESCRIPTIONS: Record<string, string> = {
  '全队新赛季定妆照': '这是辽宁男篮全队新赛季定妆照，这支融合本土底蕴与国际视角的团队，带着三连冠底气，直面新赛季挑战 —— 既为新星成长铺路，更率队憋着一股劲冲击荣耀，王朝基石的锋芒已然显现。',
  '教练组': '辽宁本钢男篮教练组以杨鸣为主帅，乌戈・洛佩斯、吴乃群、刘志轩为核心助教，融合本土智慧与国际视野。他们率队获 2024 年 CBA 三连冠，善战术设计与新星培养，是球队王朝基石',
  '球员合影': '群星聚首，剑指新程！这张核心球员合影里，熟悉的冠军面孔与潜力新星并肩而立，眼神中满是对新赛季的期待。他们曾携手铸就三连冠辉煌，如今再度集结，每一张笑脸背后都是并肩作战的默契，更藏着向新荣耀发起冲击的坚定力量。',
  '埃里克-莫兰德': '这是辽宁男篮球员埃里克-莫兰德，他是一名身高2.13米的中锋，是球队的重要得分手。',
  '俞泽晨': '这是辽宁男篮球员俞泽晨，他是一名身高1.85米的后卫，是球队的重要得分手。',
  '鄢手骐': '这是辽宁男篮球员鄢手骐，他是一名身高1.85米的后卫，是球队的重要得分手。',
  '韩德君': '这是辽宁男篮球员韩德君，他是一名身高2.13米的中锋，是球队的重要得分手。',
  '张镇麟': '这是辽宁男篮球员张镇麟，他是一名身高2.08米的小前锋，是球队的重要得分手。',
  '李虎翼': '这是辽宁男篮球员李虎翼，他是一名身高2.08米的小前锋，是球队的重要得分手。',
  '李晓旭': '这是辽宁男篮球员李晓旭，他是一名身高2.13米的中锋，是球队的重要得分手。',
  '付豪': '这是辽宁男篮球员付豪，他是一名身高2.08米的小前锋，是球队的重要得分手。',
  '赵继伟': '这是辽宁男篮球员赵继伟，他是一名身高1.85米的后卫，是球队的重要得分手。',
  '凯尔-弗格': '这是辽宁男篮球员凯尔-弗格，他是一名身高1.85米的后卫，是球队的重要得分手。',
  '周俊成': '这是辽宁男篮球员周俊成，他是一名身高2.08米的小前锋，是球队的重要得分手。',
  '丛明晨': '这是辽宁男篮球员丛明晨，他是一名身高2.08米的小前锋，是球队的重要得分手。',
  '郭艾伦': '这是辽宁男篮球员郭艾伦，他是一名身高1.85米的后卫，是球队的重要得分手。',
  '刘雁宇': '这是辽宁男篮球员刘雁宇，他是一名身高2.13米的中锋，是球队的重要得分手。',
  '吴昌泽': '这是辽宁男篮球员吴昌泽，他是一名身高2.08米的小前锋，是球队的重要得分手。',
  '乌戈-洛佩斯': '这是辽宁男篮球员乌戈-洛佩斯，他是一名身高2.13米的中锋，是球队的重要得分手。',
  '杨鸣': '这是辽宁男篮球员杨鸣，他是一名身高1.85米的后卫，是球队的重要得分手。',
  '吴乃群': '这是辽宁男篮球员吴乃群，他是一名身高2.13米的中锋，是球队的重要得分手。',
  '2017-2018': '这是辽宁男篮2017-2018赛季的冠军海报，展现了球队的团结与实力。照片中每一位球员都精神饱满，体现了新赛季的斗志和决心。',
  '2021-2022': '这是辽宁男篮2021-2022赛季的冠军海报，展现了球队的团结与实力。照片中每一位球员都精神饱满，体现了新赛季的斗志和决心。',
  '2022-2023': '这是辽宁男篮2022-2023赛季的冠军海报，展现了球队的团结与实力。照片中每一位球员都精神饱满，体现了新赛季的斗志和决心。',
  '2023-2024': '这是辽宁男篮2023-2024赛季的冠军海报，展现了球队的团结与实力。照片中每一位球员都精神饱满，体现了新赛季的斗志和决心。',
}

// 朗读配置
const NARRATOR_CONFIG = {
  STAY_TIME: 1000, // 停留时间（毫秒）
  INTERACTION_DISTANCE: 3.0, // 交互距离
  FACING_THRESHOLD: 0.3 // 面向阈值
}

// 图片交互状态接口
interface ImageInteractionData {
  name: string
  position: THREE.Vector3
  distance: number
  imageUrl: string
}

// 朗读状态接口
interface NarratorState {
  isNearPhoto: boolean
  isReading: boolean
  currentPhoto: string | null
  stayTimer: number
}

// 全局变量跟踪当前播放的语音
let currentUtterance: SpeechSynthesisUtterance | null = null

// 主要的朗读Hook
export const usePhotoNarrator = () => {
  // 状态管理
  const [state, setState] = useState<NarratorState>({
    isNearPhoto: false,
    isReading: false,
    currentPhoto: null,
    stayTimer: 0
  })

  // 引用
  const timerRef = useRef<number | null>(null)

  // 清理函数
  const cleanup = useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current)
      timerRef.current = null
    }
  }, [])

  // 开始朗读
  const startReading = useCallback(async (photoName: string) => {
    const description = PHOTO_DESCRIPTIONS[photoName]
    if (!description) return

    try {
      cleanup()
      const ttsUrl = await generateTTS(description)
      
      if (ttsUrl) {
        setState(prev => ({ ...prev, isReading: true, currentPhoto: photoName }))
        
        // 设置定时器来模拟结束状态
        setTimeout(() => {
          setState(prev => ({ ...prev, isReading: false, currentPhoto: null }))
        }, description.length * 200)
      }
    } catch (error) {
      console.error('朗读失败:', error)
      setState(prev => ({ ...prev, isReading: false, currentPhoto: null }))
    }
  }, [cleanup])

  // 停止朗读
  const stopReading = useCallback(() => {
    cleanup()
    
    // 停止浏览器TTS
    if ('speechSynthesis' in window) {
      if (currentUtterance) {
        currentUtterance.onend = null
        currentUtterance.onerror = null
        currentUtterance.onstart = null
        currentUtterance.onpause = null
        currentUtterance.onresume = null
        currentUtterance = null
      }
      
      try {
        speechSynthesis.pause()
        speechSynthesis.cancel()
        setTimeout(() => speechSynthesis.cancel(), 10)
        setTimeout(() => speechSynthesis.cancel(), 20)
      } catch (error) {
        console.error('停止TTS时出错:', error)
      }
    }
    
    setState(prev => ({ ...prev, isReading: false, currentPhoto: null }))
  }, [cleanup])

  // 检查图片交互
  const checkPhotoInteraction = useCallback((
    nearestImage: ImageInteractionData | null,
    cameraPosition: THREE.Vector3,
    cameraRotation: THREE.Euler
  ) => {
    // 检查是否在可查看区域内
    const isInViewableArea = nearestImage && 
      Object.keys(PHOTO_DESCRIPTIONS).includes(nearestImage.name) &&
      nearestImage.distance <= NARRATOR_CONFIG.INTERACTION_DISTANCE &&
      (() => {
        const cameraDirection = new THREE.Vector3()
        const cameraQuaternion = new THREE.Quaternion().setFromEuler(cameraRotation)
        cameraDirection.set(0, 0, -1).applyQuaternion(cameraQuaternion)
        
        const toImage = new THREE.Vector3()
        toImage.subVectors(nearestImage.position, cameraPosition).normalize()
        
        const dotProduct = cameraDirection.dot(toImage)
        return dotProduct >= NARRATOR_CONFIG.FACING_THRESHOLD
      })()

    // 如果不在可查看区域内或没有检测到图片
    if (!isInViewableArea || !nearestImage) {
      setState(prev => {
        if (prev.isNearPhoto || prev.isReading) {
          stopReading()
          return { ...prev, isNearPhoto: false, currentPhoto: null }
        }
        return prev
      })
      return
    }

    // 现在在可查看区域内
    const currentPhotoName = nearestImage.name

    setState(prev => {
      // 如果是新进入区域或切换到不同图片
      if (!prev.isNearPhoto || prev.currentPhoto !== currentPhotoName) {
        if (prev.isReading) {
          stopReading()
        }
        
        // 开始1秒计时
        timerRef.current = setTimeout(() => {
          startReading(currentPhotoName)
        }, NARRATOR_CONFIG.STAY_TIME)
        
        return { ...prev, isNearPhoto: true, currentPhoto: currentPhotoName }
      }
      return prev
    })
  }, [startReading, stopReading])

  // 组件卸载时清理
  useEffect(() => {
    return () => {
      cleanup()
    }
  }, [cleanup])

  return {
    // 状态
    isReading: state.isReading,
    currentPhoto: state.currentPhoto,
    isNearPhoto: state.isNearPhoto,
    
    // 方法
    checkPhotoInteraction,
    stopReading
  }
}

// TTS生成函数（使用浏览器内置语音合成）
const generateTTS = async (text: string): Promise<string | null> => {
  return new Promise((resolve, reject) => {
    if (!('speechSynthesis' in window)) {
      reject(new Error('浏览器不支持语音合成'))
      return
    }
    
    const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = 'zh-CN'
    utterance.rate = 0.8
    utterance.pitch = 1.0
    utterance.volume = 1.0
    
    // 设置全局变量跟踪当前语音
    currentUtterance = utterance
    
    // 尝试使用中文语音
    const voices = speechSynthesis.getVoices()
    const chineseVoice = voices.find(voice => 
      voice.lang.includes('zh') || voice.lang.includes('CN')
    )
    if (chineseVoice) {
      utterance.voice = chineseVoice
    }
    
    utterance.onend = () => {
      currentUtterance = null
      resolve('browser_tts')
    }
    
    utterance.onerror = (event) => {
      currentUtterance = null
      
      // 如果是中断错误，不视为失败
      if (event.error === 'interrupted') {
        resolve('browser_tts')
        return
      }
      
      reject(new Error('浏览器TTS失败: ' + event.error))
    }
    
    speechSynthesis.speak(utterance)
  })
}

// 导出配置和内容，方便外部使用
export { PHOTO_DESCRIPTIONS, NARRATOR_CONFIG }
